<template>
  <div tabindex="0"
       @keydown.down="handleFocus"
       :class="classes"
       :style="formItemStyles"
       v-clickoutside="handleClose">
    <!--label-->
    <label :class="labelClasses"
           :style="labelStyles"
           v-if="isShowLabel">
      <slot name="label">{{label}}</slot>
    </label>
    <div :class="selectionCls" ref="reference" @click="toggleMenu">
      <slot name="input">
        <!-- 多选 -->
        <div :class="[prefix + '-tag', prefix + '-tag-checked']" v-if="multiple" v-for="(item, index) in showSelectedMultiple" :key="item.id">
          <span :class="[prefix+'-tag-text']" :title="item.name">{{ item.name }}</span>
          <Icon type="ios-close-empty" @click.native.stop="removeTag(index, $event)" />
        </div>
        <span :class="[prefix+'-tag-more']" v-if="showEllipsis">{{ showMaxTagPlaceholder }}</span>
        <!-- placeholder -->
        <span :class="[prefixCls + '-placeholder']" v-show="showPlaceholder && !canSearch">{{ localePlaceholder }}</span>
        <!-- 单选 -->
        <span :class="[prefixCls + '-selected-value']" v-if="!showPlaceholder && !multiple && !canSearch" :title="selectedSingle.name" v-text="selectedSingle.name"></span>
        <input  v-if="canSearch"
                ref="input"
                type="text"
                :title="searchStr"
                v-model="searchStr"
                :disabled="disabled"
                :class="[prefixCls + '-input']"
                :placeholder="showPlaceholder ? localePlaceholder : ''"
                :style="inputStyle"
                autocomplete="off"
                spellcheck="false"
                @click.stop="handleSearchInputClick"
                @keyup="handleSearchStrChange"
                @focus="handleSearchInputFocus"
                @blur="handleSearchInputBlur"
        >
        <Icon type="ios-close" :class="[prefixCls + '-arrow']" v-show="showCloseIcon" @click.native.stop="clearSelect" />
        <!-- 下箭头 -->
        <Icon type="arrow-down-b" :class="[prefixCls + '-arrow']" />
      </slot>
    </div>
    <!--验证提示-->
    <div :class="errorTipClasses" :style="errorTipStyles" v-if="isShowMessage">{{validateMessage}}</div>
    <transition name="transition-drop">
      <Drop :class="dropdownCls"
            v-show="visible"
            :placement="placement"
            ref="dropdown"
            :data-transfer="transfer"
            :width="dropdownWidth"
            :className="popupClass"
            v-if="dropLoaded"
            v-transfer-dom>
        <tree
          ref="tree"
          :data="computedData"
          :lazyLoad="lazyLoad"
          :syncRender="syncRender"
          :activeId="activeId"
          :checkedIds="checkedIds"
          :canSearch="false"
          :pinyinSearch="pinyinSearch"
          :clearable="clearable"
          @alreadyLoad="asyncComponentsLoaded"
          :connectParent="connectParent"
          :cascade="cascade"
          :showIcon="showIcon"
          :showCheckbox="multiple"
          :autoRequestData="autoRequestData"
          :remote="remote"
          :requestDataUrl="requestDataUrl"
          :requestDataMethod="requestDataMethod"
          :remoteMethod="remoteMethod"
          :searchShowLimit="searchShowLimit"
          :placeholder="searchPlaceholder"
          :onlyLeaf="onlyLeaf"
          @select="select"
          @check="check"
          @watch-update="watchUpdate"
          @data-init="dataInit"
          @ready="ready" />
      </Drop>
    </transition>
    <transition name="transition-drop">
      <Drop :class="dropdownSearchCls"
            v-show="searchDropVisible"
            ref="searchDrop"
            :data-transfer="transfer"
            :placement="placement"
            v-transfer-dom >
        <ul v-if="searchData.length > 0" :style="dropDownListStyles" :class="[prefixCls + '-search-list']">
          <li :class="[prefixCls + '-search-list-item', { 'focus' : searchItemFocusIndex === (index + 1)}]" :key="index" :title="delHTMLTag(item.name)" v-for="(item, index) in searchData" @click="handleSearchItemClick(item)">
            <span v-html="item.name"></span>
          </li>
        </ul>
        <ul v-else :class="[prefixCls + '-not-found']"><li>{{ t('i.select.noMatch') }}</li></ul>
      </Drop>
    </transition>
  </div>
</template>
<script type="text/ecmascript-6"  src="./index.js"></script>
